/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { Component } from 'react';
import { Form, Input, Button, message } from 'antd';
import KbGeographicView from '@/components/KbGeographicView';
import { checkContact } from '@/utils/utils';
import classNames from 'classnames';
import styles from './CustomInput.less';

const { TextArea } = Input;
const { Item: FormItem } = Form;


@Form.create()
class CustomInput extends Component {
  static defaultProps = {
    okText: '保存',
    onSave: () => {},
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  // 触发验证，主要用于父级处理 allow = true 表示允许全空
  validateFields(then = () => {}, allow) {
    const { form } = this.props;
    const values = form.getFieldsValue();
    const { area, ...rest } = values;
    const [province, city, district] = area;
    const triggerThen = err => {
      then(
        err,
        {
          ...rest,
          province,
          city,
          district,
        },
        () => {
          form.setFieldsValue({ name: '', mobile: '', area: [], address: '',company:''});
        }
      );
    };
    if (allow) {
      // 允许全空
      const hasNoValue = [rest.name, rest.mobile, ...area].filter(item => !!item).length === 0;
      if (hasNoValue) {
        triggerThen();
        return;
      }
    }
    form.validateFields({ first: true }, err => {
      if (err) {
        Object.keys(err).map(key => {
          const [{ message: msg }] = err[key].errors;
          message.error(msg);
        });
      }
      triggerThen(err);
    });
  }

  onSave = () => {
    const { onSave } = this.props;
    this.validateFields((err, data, clear) => {
      if (err) return;
      onSave(data);
      clear();
    });
  };

  render() {
    const { form, okText, value,layout='' } = this.props;
    return (
      <div  className={classNames('kb-form ant-form ant-form-horizontal',styles[layout])}>
      <div>
        <FormItem label="姓名" hiderequiredmark='true' help="">
          {form.getFieldDecorator('name', {
            initialValue: (value && value.name) || '',
            rules: [
              {
                required: true,
                message: '请输入姓名',
              },
            ],
          })(<Input placeholder="请输入姓名" />)}
        </FormItem>
        <FormItem label="电话" help="">
          {form.getFieldDecorator('mobile', {
            initialValue: (value && value.mobile) || '',
            rules: [
              {
                required: true,
                message: '请输入电话',
              },
              {
                validator: (rule, value, callback) => {
                  if (!checkContact(value)) {
                    callback(rule.message);
                    return;
                  }
                  callback();
                },
                message: '请输入正确的手机号或固话',
              },
            ],
          })(<Input placeholder="如需同时输入手机和座机，请用逗号或空格隔开" />)}
        </FormItem>
       <FormItem label="公司">
            {form.getFieldDecorator('company', {
              initialValue: (value && value.company) || '',
            })(<Input placeholder="请输入公司名称(选填)" />)}
          </FormItem>
      </div>
       <div>
         <FormItem label="市区" help="">
           {form.getFieldDecorator('area', {
             initialValue: value ? [value.province, value.city, value.district] : '',
             rules: [
               {
                 required: true,
                 message: '请选择省市区',
               },
             ],
           })(<KbGeographicView/>)}
         </FormItem>
         <FormItem label='地址' help="">
           {form.getFieldDecorator('address', {
             initialValue: (value && value.address) || '',
             rules: [
               {
                 required: true,
                 message: '请输入地址',
               },
             ],
           })(<Input placeholder="请输入详细地址"/>)}
         </FormItem>
       </div>

        {okText && (
          <div style={{ paddingLeft: 44 }}>
            <Button type="primary" onClick={this.onSave}>
              {okText}
            </Button>
          </div>
        )}
      </div>
    );
  }
}

export default CustomInput;
